<template>
  <div class="conversation-history-page">
    <div class="list-container">
      <div 
        v-for="conversation in conversationList" 
        :key="conversation.id" 
        class="history-item"
        @click="handleItemClick(conversation)"
      >
        {{ conversation.name }}
      </div>
    </div>
    
    <!-- 返回按钮 -->
    <div class="back-button-container">
      <button class="back-button" @click="goBack">
        <svg class="back-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M19 12H5M12 19L5 12L12 5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
        返回
      </button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { storeToRefs } from 'pinia';
import { useRouter } from 'vue-router';
import { useDialogConversationStore } from '@/stores/dialogConversationStore';
import { useUserStore } from '@/stores/userStore';

const router = useRouter();
const dialogConversationStore = useDialogConversationStore();
const userStore = useUserStore();
const { conversationList } = storeToRefs(dialogConversationStore);
const { userId } = storeToRefs(userStore);

// 点击历史记录项
const handleItemClick = async (conversation: { id: string; name?: string }) => {
  try {
    console.log('点击了历史记录:', conversation.name);
    
    // 设置当前对话ID和索引
    dialogConversationStore.currentConversationId = conversation.id;
    const conversationIndex = dialogConversationStore.conversationList.findIndex(
      conv => conv.id === conversation.id
    );
    dialogConversationStore.currentConversationIndex = conversationIndex;
    
    // 调用getConversation获取历史消息
    await dialogConversationStore.getConversation(conversation.id, userId.value);
    
    // 跳转到聊天页面
    router.push('/mobile/chat');
  } catch (error) {
    console.error('加载对话历史失败:', error);
    // 可以在这里添加错误提示
  }
};

// 返回上一页
const goBack = () => {
  router.push('/mobile/chat');
};
</script>

<style lang="scss" scoped>
.conversation-history-page {
  width: 750px;
  height: 100vh;
  background: linear-gradient(180deg, rgba(15, 137, 255, 0.32) 0%, rgba(72, 112, 255, 0) 100%);
  display: flex;
  flex-direction: column;
  padding: 32px;
}

.list-container {
  max-height: 90vh;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 20px 0;
  
  // 优化滚动体验
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  
  // 自定义滚动条样式
  &::-webkit-scrollbar {
    width: 6px;
  }
  
  &::-webkit-scrollbar-track {
    background: transparent;
  }
  
  &::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
  }
  
  &::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.3);
  }
}

.history-item {
  background: #fff;
  border-radius: 18px;
  padding: 13px 20px;
  margin-bottom: 20px;
  font-size: 32px;
  color: #000;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: left;
  
  // 长文本自动换行
  overflow-wrap: anywhere;
  word-break: break-word;
}

// 返回按钮容器
.back-button-container {
  position: fixed;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
}

// 返回按钮样式
.back-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.95);
  border: 2px solid rgba(15, 137, 255, 0.3);
  border-radius: 50px;
  padding: 16px 32px;
  font-size: 28px;
  color: #0f89ff;
  cursor: pointer;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 32px rgba(15, 137, 255, 0.2);
  min-width: 120px;
  
  &:hover {
    background: rgba(15, 137, 255, 0.1);
    border-color: rgba(15, 137, 255, 0.5);
    transform: translateY(-2px);
    box-shadow: 0 12px 40px rgba(15, 137, 255, 0.3);
  }
  
  &:active {
    transform: translateY(0);
    box-shadow: 0 4px 20px rgba(15, 137, 255, 0.2);
  }
}

// 返回图标样式
.back-icon {
  width: 20px;
  height: 20px;
  color: #0f89ff;
}
</style>
